<!-- 库房管理----扫一扫结果 -->
<script lang="ts">
import { reactive, inject, watch, nextTick } from "vue";
import { putInStorage, takeOutStorage } from "/@/api/wms/locationInfo";
import { queryItemByCodes } from "/@/api/basic/dictionaries";
import { errorMessage, successMessage, alertMessage } from "/@/utils/message";
export default {
  name: "scanCode",
  props: {
    operation: {
      type: String,
      default: ""
    },
    dialogShow: {
      type: Boolean,
      default: false
    },
    detailData: []
  },
  setup(props, ctx) {
    const subItemData = inject("subItemData") as any;
    console.log(subItemData);
    // 出库操作绑定数据
    const scanCodeData = reactive({
      submitLoading: false,
      operation: "", //出入库类型
      formShow: false, //表单显示隐藏
      dialogShow: false, //操作显示隐藏
      detailData: [] as any[],
      numberData: [] as any[], //数量单位
      weightData: [] as any[], //成本单位
      lengthData: [] as any[] //宽度单位长度单位
    });
    watch(props, n => {
      scanCodeData.dialogShow = n.dialogShow;
      if (scanCodeData.dialogShow) {
        // queryUnit("数量");
        // queryUnit("重量");
        // queryUnit("长度");
        scanCodeData.operation = n.operation;
        scanCodeData.detailData = n.detailData;
        console.log(scanCodeData.detailData);
        var receiptsType = subItemData?.detailData?.receiptsType;
        var programNumber = subItemData?.detailData?.programNumber;
        if (scanCodeData.detailData[0].programNumber) {
          if (receiptsType != "DRD") {
            scanCodeData.detailData[0].count = scanCodeData.detailData[0].sNum;
          }
          scanCodeData.detailData[0].unit = "张";
        }
        if (receiptsType == "TLD" && programNumber) {
          scanCodeData.detailData[0].receiptsType = "YLTLD";
          scanCodeData.detailData[0].weight =
            subItemData?.detailData?.currentWeight ?? 0;
          scanCodeData.detailData[0].weightUnit = "KG";
          scanCodeData.detailData[0].count = scanCodeData.detailData[0].rNum;
        }
        if (receiptsType != "DRD" && !programNumber) {
          scanCodeData.detailData.map(item => {
            item.weight = (item?.count ?? 0) * (item?.rate ?? 1);
          });
        }
        if (receiptsType == "LLD" && programNumber) {
          scanCodeData.detailData.map(item => {
            item.weight = item?.sumWeight ?? 0;
          });
        }
        console.log(scanCodeData.detailData);
      }
    });

    const addDetail = () => {
      var bool = false;
      var bool1 = false;
      var detailData = scanCodeData.detailData;
      if (detailData.length > 0) {
        for (var i = 0; i < detailData.length; i++) {
          let data = detailData[i];
          Object.keys(data).forEach(key => {
            if (
              // key == "longt" ||
              // key == "lengthUnit" ||
              // key == "width" ||
              // key == "widthUnit" ||
              // key == "thickness" ||
              // key == "thicknessUnit" ||
              // key == "specification" ||
              key == "count" ||
              key == "unit"
            ) {
              data[key] == "" ? (bool = true) : null;
            }
            if (key == "count") {
              data[key] == 0 ? (bool1 = true) : null;
            }
          });
        }
        if (bool) {
          alertMessage("请将数据填写完整", "提示");
          return;
        }
        if (bool1) {
          alertMessage("数量不能为0", "提示");
          return;
        }
      } else {
        alertMessage("请填写详情信息", "提示");
        return;
      }
      scanCodeData.submitLoading = true;
      if (scanCodeData.operation == "入库") {
        putInStorage(detailData)
          .then((res: any) => {
            if (res.code === 0) {
              detailClose();
              searchEvent();
              successMessage("操作成功");
            } else {
              errorMessage(res.message);
              scanCodeData.submitLoading = false;
            }
          })
          .catch(() => {
            errorMessage("操作失败");
            scanCodeData.submitLoading = false;
          });
      } else {
        takeOutStorage(detailData)
          .then((res: any) => {
            if (res.code === 0) {
              detailClose();
              searchEvent();
              successMessage("操作成功");
            } else {
              errorMessage(res.message);
              scanCodeData.submitLoading = false;
            }
          })
          .catch(() => {
            errorMessage("操作失败");
            scanCodeData.submitLoading = false;
          });
      }
    };
    const detailClose = () => {
      nextTick(() => {
        scanCodeData.submitLoading = false;
      });
      ctx.emit("scanItemClose", false);
      scanCodeData.dialogShow = false;
      scanCodeData.formShow = false;
    };
    const searchEvent = () => {
      ctx.emit("searchEvent");
    };
    // 查询所有组织信息
    const queryUnit = (code: any) => {
      queryItemByCodes([code]).then((res: any) => {
        if (code == "重量") {
          scanCodeData.weightData = res;
        } else if (code == "数量") {
          scanCodeData.numberData = res;
        } else {
          scanCodeData.lengthData = res;
        }
      });
    };
    const changeCurrentWeight = (row: any) => {
      row.weight = (row?.count ?? 0) * (row?.rate ?? 1);
    };

    return {
      scanCodeData,
      queryUnit,
      addDetail,
      detailClose,
      changeCurrentWeight
    };
  },
  methods: {}
};
</script>
<template>
  <div>
    <!-- 出库操作 -->
    <el-dialog
      v-model="scanCodeData.dialogShow"
      :title="scanCodeData.operation + '操作'"
      width="70%"
      top="9vh"
      :before-close="detailClose"
      :close-on-click-modal="false"
    >
      <el-table
        stripe
        :data="scanCodeData.detailData"
        border
        fit
        size="mini"
        height="100%"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          prop="batchNo"
          min-width="140"
          label="批号"
        ></el-table-column>
        <el-table-column
          prop="materialName"
          label="品名"
          min-width="300"
        ></el-table-column>
        <el-table-column
          prop="materialCode"
          label="料号"
          min-width="120"
        ></el-table-column>
        <el-table-column label="成本(单位)" width="100">
          <template #default="{ row }">
            {{ row.weight
            }}{{
              row.weight && row.weightUnit ? "(" + row.weightUnit + ")" : ""
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="库存(单位)" width="100">
          <template #default="{ row }">
            {{ row.pcsNum
            }}{{ row.pcsNum && row.pcsUnitCN ? "(" + row.pcsUnitCN + ")" : "" }}
          </template>
        </el-table-column> -->
        <el-table-column
          label="所属库房"
          prop="storageName"
          width="80"
        ></el-table-column>
        <!-- <el-table-column
          label="所属库位"
          prop="stgeLocCode"
          width="100"
        ></el-table-column> -->
        <el-table-column
          label="单位转换率"
          prop="rate"
          width="100"
        ></el-table-column>
        <!-- <el-table-column label="长度" width="100" prop="longt">
          <template #default="{ row }">
            <span v-if="row.programNumber">{{ row.longt }}</span>
            <el-input
              v-else
              v-model="row.longt"
              size="small"
              style="width: 100%"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="长度单位" width="100">
          <template #default="{ row }">
            <span v-if="row.programNumber">{{ row.lengthUnit }}</span>
            <el-select
              v-else
              v-model="row.lengthUnit"
              size="small"
              style="width: 100%"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in scanCodeData.lengthData"
                :key="item.id"
                :label="item.unitName"
                :value="item.unitCode"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="宽度" width="100">
          <template #default="{ row }">
            <span v-if="row.programNumber">{{ row.width }}</span>
            <el-input
              v-else
              v-model="row.width"
              size="small"
              style="width: 100%"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="宽度单位" width="100">
          <template #default="{ row }">
            <span v-if="row.programNumber">{{ row.widthUnit }}</span>
            <el-select
              v-else
              v-model="row.widthUnit"
              filterable
              size="small"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in scanCodeData.lengthData"
                :key="item.id"
                :label="item.unitName"
                :value="item.unitCode"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="厚度/高度" width="110">
          <template #default="{ row }">
            <span v-if="row.programNumber">{{ row.thickness }}</span>
            <el-input
              v-else
              v-model="row.thickness"
              size="small"
              style="width: 100%"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="厚度/高度单位" width="110">
          <template #default="{ row }">
            <span v-if="row.programNumber">{{ row.thicknessUnit }}</span>
            <el-select
              v-else
              v-model="row.thicknessUnit"
              size="small"
              style="width: 100%"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in scanCodeData.lengthData"
                :key="item.id"
                :label="item.unitName"
                :value="item.unitCode"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="200" prop="specification">
          <template #default="{ row }">
            <span v-if="row.programNumber">{{ row.specification }}</span>
            <el-input
              v-else
              v-model="row.specification"
              size="small"
              style="width: 100%"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column> -->
        <el-table-column
          :label="'本次' + scanCodeData.operation + '数量'"
          width="170"
        >
          <template #default="{ row }">
            <el-input-number
              :disabled="row.programNumber || row.receiptsTypeOld == 'WGBGD'"
              :max="row.maxCount"
              :min="0"
              size="small"
              v-model="row.count"
              placeholder="请输入"
              @change="changeCurrentWeight(row)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="库存单位" width="120">
          <template #default="{ row }">
            <el-select
              :disabled="row.programNumber"
              v-model="row.unit"
              filterable
              size="small"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in scanCodeData.numberData"
                :key="item.id"
                :label="item.unitName"
                :value="item.unitName"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="detailClose" size="small">取 消</el-button>
        <el-button
          type="primary"
          size="small"
          :disabled="scanCodeData.submitLoading"
          @click="addDetail"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
:deep(.el-dialog) {
  height: 70%;
  overflow: hidden;
}
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select,
.el-input-number {
  width: 100% !important;
}
</style>
